<template>
	<view class="confirm">
		<view class="address" v-if="hasAddress">
			<view class="address-l">
				<view class="ad1">收货地址</view>
				<view class="ad2">{{addressDetail.province}}
				{{addressDetail.city}}{{addressDetail.area}}{{addressDetail.position}}</view>
			</view>
			<view class="address-r">
				<view class="ad1">{{addressDetail.contactMan}}</view>
				<view class="ad2">{{addressDetail.contactPhone}}</view>
			</view>
		</view>
		
		<view class="noAddress">
			<text>未设置收货地址</text>
			<text class="tip">未设置收货地址将无法提交订单</text>
		</view>
		<!-- 一项产品 -->
		<view class="pro" v-for="(item,i) in orderList" :key="i">
			<view class="cont">
				<view class="cont-l">
					<image :src="item.commodityPicture" mode="" class="img"></image>
				</view>
				<view class="cont-c">
					<view class="name">{{item.commodityName}}</view>
					<view class="spec">{{item.commoditySpecValue}}</view>
					<view class="price">¥{{item.marketingPrice}}</view>
				</view>
			</view>
			<view class="block1">
				<view class="block1-item">
					<text class="block1-l">购买数量</text>
					<text class="block1-r">{{item.buyAmount}}</text>
				</view>
				<view class="block1-item">
					<text class="block1-l">运费</text>
					<text class="block1-r">包邮</text>
				</view>
			</view>
		</view>
		<!-- 一项产品 -->

		<view class="block1 coupon">
			<view class="block1-item">
				<text class="block1-l">可用优惠券</text>
				<text class="block1-r">暂无</text>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-l">
				合计金额
			</view>
			<view class="bottom-c">
				<view>￥{{priceAmount}}</view>
				<view>运费0.00元</view>
			</view>
			<view class="bottom-r" @click="orderConfirm">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import Api from '../../../util/api.js'
	export default {
		data() {
			return {
				 addressDetail:'',
				 priceAmount: 0,
				 orderDetails:[],
				 hasAddress: false
			};
		},
		computed: {
			...mapState({
				orderList: state=> state.orderConfirmList
			})
		},
		onLoad() {
			this.getAddress();
			this.getAmount();
		},
		methods: {
			getAddress(){
				Api.fetchPost('/fsbus/M2202').then(res=>{
					if(res.errorNo == 0){
						if(res.results&&res.results.data){
							this.addressDetail = res.results.data;
							this.hasAddress = true;
						}else {
							this.hasAddress = false;
						}
					}
				}).then(err=>{
				})
			},
			getAmount(){
				for(let i=0; i<this.orderList.length;i++){
					this.priceAmount +=  this.orderList[i].marketingPrice*this.orderList[i].buyAmount;
					var params = {
						buyAmount: this.orderList[i].buyAmount,
						commodityId: this.orderList[i].commodityId,
						commoditySpecId: this.orderList[i].commoditySpecId,
						cartId: this.orderList[i].cartId
					}
					this.orderDetails.push(params)
				}
			},
			// 提交订单
			orderConfirm(){
				var params = {
					addressId: this.addressDetail.id,
					orderDetails: JSON.stringify(this.orderDetails)
				}
				Api.fetchPost('/fsbus/M2000',params).then(res=>{
					if(res.errorNo == 0){
						console.log(res);
					}
				}).then(err=>{
				})
			},
			toLogistics(){
				uni.navigateTo({
						url: '/pages/order/logistics/logistics'
				});
			},
		}
	}
</script>

<style>
.confirm {
	width: 100%;
	min-height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
	padding-bottom: 128upx;
}
.address {
	background-color: #fff;
	padding: 20upx 30upx;
	display: flex;
}
.address .address-l {
	width: 55%;
	margin-right: 20upx;
}
.address .address-r {
	text-align: right;
	flex: 1;
}
.address .address-l ,.address .address-r {
	overflow: hidden;
}
.address .ad1 {
	color: #333;
	height: 60upx;
}
.address .ad2 {
	color: #999999;
}

.noAddress {
	width: 100%;
	height: 160upx;
	background-color: #fff;
	line-height: 160upx;
	padding: 0 30upx;
}
.noAddress .tip {
	background-color: #F52A4C;
	height: 53upx;
	line-height: 53upx;
	color: #fff;
	padding: 5upx 20upx;
	border-radius: 6upx;
	margin-left: 20upx;
	position: relative;
}
.noAddress .tip:before{
	content: '';
	width: 0;
	height:0;
	border-top:10upx solid transparent;
	border-bottom: 10upx solid transparent;
	border-right: 10upx solid #F52A4C;
	position: absolute;
	left: -10upx;
	top: 12upx;
}

.cont {
	display: flex;
	background-color: #fff;
	margin-top: 20upx;
	padding: 20upx 30upx;
}
.cont .cont-l {
	width: 150upx;
	height: 150upx;
	margin-right: 40upx;
}
.cont .cont-l .img {
	width: 100%;
	height: 100%;
	background-color: #A2A2A2;
}
.cont .cont-c {
	flex: 1;
}
.cont .name {
	font-size: 24upx;
	height: 50upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cont .spec {
	color: #666666;
	font-size: 22upx;
	margin-bottom: 10upx;
}
.cont .price {
	color: #2E2E2E;
}
.block1 {
	background-color: #fff;
	margin-bottom: 20upx;
	padding: 0 30upx;
	line-height: 100upx;
}
.block1-item {
	height: 100upx;
	overflow: hidden;
}
.block1-l {
	float: left;
	font-size: 30upx;
}
.block1-r {
	float: right;
	font-size: 28upx;
}
.coupon .block1-r {
	color: #999;
}
.bottom {
	width: 100%;
	height: 118upx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0px 0px 5px #ccc;
	display: flex;
	line-height: 118upx;
}
.bottom .bottom-l {
	flex: 1;
	padding-left: 30upx;
	font-size: 28upx;
}
.bottom-c {
	width: 180upx;
	line-height: 40upx;
	padding: 18upx 0;
	text-align: right;
	margin-right: 20upx;
}
.bottom-c view:first-child {
	color: #F52A4C;
	font-size: 36upx;
	line-height: 50upx;
}
.bottom-c view:last-child {
	color: #666;
	font-size: 23upx;
}
.bottom .bottom-r {
	width: 240upx;
	height: 118upx;
	background-color: #F52A4C;
	color: #fff;
	font-size: 30upx;
	text-align: center;
}
</style>
